<template>
  <div style="padding:30px;">
    <el-table max-height="500" :key='tableKey' :data="list" v-loading.body="listLoading" border fit
      highlight-current-row style="width: 100%">
      <el-table-column align="left" label="ID" width="100"> <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template> </el-table-column>
      <el-table-column width="100" align="left" label="uid"> <template slot-scope="scope">
          <span>{{ scope.row.uid }}</span>
        </template> </el-table-column>
      <el-table-column width="150" align="left" label="用户名称"> <template slot-scope="scope">
          <span>{{ scope.row.memberName }}</span>
        </template> </el-table-column>
      <el-table-column width="120" align="left" label="订单号"> <template slot-scope="scope">
          <span>{{ scope.row.orderid }}</span>
        </template> </el-table-column>
      <!-- <el-table-column width="110" align="right" label="优惠金"> <template slot-scope="scope">
          <span>{{  / 100 }}</span>
        </template> </el-table-column> -->
      <el-table-column width="110" align="right" label="红包"> <template slot-scope="scope">
          <span>{{ scope.row.money / 100 }}</span>
        </template> </el-table-column>
      <el-table-column width="150" align="center" label="发生时间"> <template slot-scope="scope">
          <span>{{ scope.row.createdAt | parseTime(scope.row.createdAt) }}</span>
        </template> </el-table-column>
      <el-table-column width="200" align="left" label="备注"> <template slot-scope="scope">
          <span>{{ scope.row.remark }}</span>
        </template> </el-table-column>
    </el-table>
    <div v-show="!listLoading">
      <el-pagination background @current-change="handleCurrentChange" :current-page="listQuery.page"
        :page-size="listQuery.num" layout="total, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>
  </div>
</template>

<script>
import {
  redpacket_list
} from '@/api/member';
export default {
  components: {
  },
  props: ['uid'],
  watch: {
    // formData: {
    //   immediate: true,
    //   handler(val) {
    //     this.listQuery.uid = val.id;

    //     // this.getList();
    //   },
    //   deep: true
    // },
    uid(newValue) {
      if (newValue) {
        console.log(newValue, '333333333')

        this.listQuery.uid = newValue
        this.getList()
      }
    }
  },
  data() {
    return {
      list: null,

      listLoading: true,
      listQuery: {
        pageNum: 1,
        pageSize: 20,
        keyword: undefined,
        remark: undefined,
        uid: 0,
        status: undefined,
      },
      total: null,
      tableKey: 0
    }
  },
  created() {
    // this.getList();
  },
  methods: {
    getList() {
      this.listLoading = true;
      redpacket_list(this.listQuery)
        .then(response => {
          this.list = response.data.list || [];
          this.total = response.data.total;
          this.listLoading = false;
        })
    },
    handleFilter() {
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.pageNum = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val;
      this.getList();
    },
  }
}
</script>
